<template>
  <div class="login_container">
    <div class="login_box ">
      <div class="login_text">用户登录</div>
      <!--跳转注册-->
      <div class="register-link">
      <el-button type="text" @click="goToRegister">
        <router-link to="/register">注册</router-link>
      </el-button>
      </div>
      <el-form class="login_box_input" :rules="rules" ref="form" :model="form">
        <!--用户名-->
        <el-form-item  prop="username">
          <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item  prop="password">
          <el-input v-model="form.password"
                    type="password"
                    prefix-icon="el-icon-lock"
                    show-password
          ></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="btn">
          <el-button type="primary" round @click="onSubmit">登录</el-button>
          <el-button type="info" round @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Login',
  components: {},
  data() {
    return {
      form: {
        username: 'luom',
        password: '12345678',
      },
      rules: {
        username: [
          { required: true, message: '用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码', trigger: 'blur' },
          { min: 6, message: '长度不少于6个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    async onSubmit() {
      this.$refs.form.validate(async v => {
        if (!v) return;
        const { data: res } = await axios.post('/api/user/login', {
          username: this.form.username,
          userPassword: this.form.password,
        });
        if (res.code !== 0) {
          return this.$message.error(res.description||"登录失败");
        }
        this.$message({
          type: 'success',
          message: '登录成功',
          duration: 700,
        });
        await this.current(); // 等待 current() 方法完成

        await this.$router.push('/home'); // 然后进行路由跳转
      });
    },

    async current() {
      try {
        const {data:response} = await axios.get('api/user/current');
        window.sessionStorage.setItem("user", JSON.stringify(response.data));
      } catch (error) {
        // 处理错误
      }
    },
    resetForm(){
      this.$refs.form.resetFields();
    },
    goToRegister() {
      this.$router.push('/register'); // 使用编程式导航跳转到注册页面
    },

  },

}
</script>


<style scoped>
.login_container {
  background-color: #689dff;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 350px;
  border-radius: 3px;
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn{
  display: flex;
  justify-content: center;
}
.login_box_input{
  width: 300px;
  height: 200px;
  border-radius: 3px;
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
.login_text{
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.register-link {
  margin-top: 5px;
  text-align: center;
}


</style>